<template>
  <div>
    <el-header><PersonHeader></PersonHeader></el-header>
    <el-divider></el-divider>
    <el-container class="myCcontainer">
      <el-aside style="width: 300px;height: 100%">
        <PersonPhoto></PersonPhoto>
        <PersonMenu></PersonMenu>
      </el-aside>
      <el-main>

        <el-collapse v-model="activeNames" @change="handleChange">
          <el-card class="box-card" style="margin: 10px 0px">
          <el-collapse-item name="1">
            <template slot="title">
              <h2>职位管理</h2>
            </template>

            <el-form ref="form" :model="queryForm"  style="width: 100%"  :inline="true"  size="mini">
              <el-form-item label="账号">
                <el-input v-model="queryForm.loginName"  placeholder="职位名称" ></el-input>
              </el-form-item>
              <el-form-item label="活动时间">
                <el-col :span="8">
                  <el-date-picker type="date" placeholder="选择日期" v-model="queryForm.date1" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col :span="2">&nbsp;&nbsp;&nbsp;~</el-col>
                <el-col :span="8">
                  <el-date-picker placeholder="选择日期" v-model="queryForm.date2" style="width: 100%;"></el-date-picker>
                </el-col>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onQuery">查询</el-button>
              </el-form-item>
              <el-row :gutter="20" style="margin-top: 15px;">
                <el-col :span="1" style="width: 100px"> 职位状态</el-col>
                <el-col :span="19">
                  <div>
                    <el-link :underline="false"
                             :class="salary.clazz" v-for="(salary,index) in salaryScope" @click="selectItem(salaryScope,index)">{{salary.label}}</el-link>
                  </div>
                </el-col>
              </el-row>
            </el-form>
          </el-collapse-item>
          </el-card>
          <el-card class="box-card" style="margin: 10px 0px" v-for="job in jobs">
            <el-row>
              <el-col style="width: 300px">
                <div class="grid-content bg-purple">
                  <el-row><el-link @click="goto(job.id)" >{{ job.jobName }}</el-link></el-row>
                  <el-row style="padding-top: 5px"><span style="color: red">￥不限</span> 成都</el-row>
                  <el-row style="padding-top: 5px">五险一金</el-row>
                </div>
              </el-col>
              <el-col style="width: 300px">
                <div class="grid-content bg-purple">
                  <el-row><span style="color: #1b64b1">企业</span></el-row>
                  <el-row style="padding-top: 5px">行业：服务业</el-row>
                  <el-row style="padding-top: 5px">性质：国企</el-row>
                </div>
              </el-col>
              <el-col style="width: 150px">
                <el-row style="padding-top: 20px">
                  <li class="fa fa-refresh">2021-09-13</li>&nbsp;
                  <a class="fa fa-star-o mySort">删除</a>
                  <a class="fa fa-star-o mySort" @click="goto(job.id)">修改</a>
                </el-row>
              </el-col>
            </el-row>
          </el-card>

        </el-collapse>
      </el-main>
    </el-container>
    <el-footer>
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="8" :offset="8">
          <footerx></footerx>
        </el-col>
      </el-row>
    </el-footer>
  </div>
</template>

<script>
import footerx from "../footerx";
import Personinfo from "../Personinfo";
import PersonHeader from "./components/PersonHeader";
import PersonMenu from "./components/PersonMenu";
import PersonPhoto from "./components/PersonPhoto";
import {getEnterprise} from "../../assets/util";
import {GetEnterprise} from "../../api/user";
import {AddJob,JobList} from  "../../api/JobMgr";
export default {
  name: "RecruitmentPage",
  components: {PersonPhoto, PersonMenu, PersonHeader, footerx,Personinfo},
  data (){
    return {
      enterprise: {
        logo:this.getImage()
      },
      queryForm:{
        date1:'',
        date2:''
      },
      jobs:[],
      activeNames: ['1','2','3'],
      salaryScope:[
        {label:'全部',clazz:'selected'},
        {label:'招聘中',clazz:'unSelected'},
        {label:'已暂停',clazz:'unSelected'},
        {label:'已过期',clazz:'unSelected'}
      ]
    }
  },
  methods:{
    handleOpen(key, keyPath){
      console.log(key, keyPath);
    },
    handleClose(key, keyPath){
      console.log(key, keyPath);
    },
    getImage(){
      return getEnterprise().logo;
    },
    handleChange(val) {
      console.log(val);
    },
    onQuery(){

    },
    goto(id){
      this.$router.push("ModifyJobInfo"+"/"+id);
    },
    selectItem(objects,index){
      objects.forEach(e=>{
        e.clazz = 'unSelected';
      });
      if(objects[index].label != '不限'){
        objects[index].clazz = (objects[index].clazz == 'selected')?'unSelected':'selected';
      }
      if(objects == this.jobTypes){
        if(objects[index].label != '不限'){
          if(objects[index].children){
            this.jobTypeChildren.splice(0)
            objects[index].children.forEach(e=>{
              this.jobTypeChildren.push(e)
            })
          }else{
            this.jobTypeChildren.splice(0)
          }
        }else{
          this.jobTypeChildren.splice(0)
        }
      }
    }
  },
  mounted() {
    let enterprise = getEnterprise() ;
    GetEnterprise.r(enterprise.userId).then(d=>{
      this.enterprise.logo = d.data.data.logo ;
      this.enterprise.enterpriseName = d.data.data.enterpriseName ;
    });
    JobList.r(enterprise.userId).then(d=>{
      this.jobs = d.data.data ;
    })
  }
}
</script>

<style scoped>
.myCcontainer{
  margin:0 auto;
  background: azure;
  width: 1200px;
}
.el-main{
  padding: 0px 10px;
}
.el-collapse-item__header{
  font-size: 24px;
  font-weight: bold;
  font-size: x-large;
}
h2{
  margin: 0px 10px;
}
.qzclass{
  font-size: 18px;
  font-family: '微软雅黑'!important;
  margin: 0px 10px;
}
.numerClass{
  font-size: 18px;
  margin: 0px 40px;
  font-family: '微软雅黑'!important;
  color: coral;
}
.selected{
  background-color: #409eff;
  color: white;
  border: 1px solid #999;
  font-size: 16px;
  padding: 5px 11px;
  font-family: '微软雅黑'!important;
}
.selected:hover{
  color: white;
}
.unSelected{
  font-size: 16px;
  padding: 5px 11px;
  font-family: '微软雅黑'!important;
}
</style>